import React, { Component } from 'react'
import { Form, Input } from 'antd'
import _ from 'lodash'
import { inject, observer } from 'mobx-react/index'

const domConf = [
  {
    id1: 'name',
    id2: 'host',
    id3: 'username',
    id4: '_pwd',
    isCheck: 'false',
  },
]
@inject('SocketModel')
@observer
export default class Peer extends Component {
  constructor(props) {
    super(props)

    this.state = {
      form: props.form,
      caList: _.cloneDeep(domConf),
      peerList: _.cloneDeep(domConf),
      network: [
        {
          id1: '监控服务',
          id2: 'host',
          id3: 'username',
          id4: '_pwd',
          isCheck: 'false',
        },
        {
          id1: 'VPN',
          id2: 'host',
          id3: 'username',
          id4: '_pwd',
          isCheck: 'false',
        },
        {
          id1: 'DNS域名解析',
          id2: 'host',
          id3: 'username',
          id4: '_pwd',
          isCheck: 'false',
        },
        {
          id1: '网关',
          id2: 'host',
          id3: 'username',
          id4: '_pwd',
          isCheck: 'false',
        },
      ],
      key: props.flag,
    }
    this[props.flag] = []
  }
    static defaultProps = {
      isShowDelete: true,
    }

    componentWillReact(prevProps) {
      const { status } = this.props
      const { key } = this.state
      const { checkPeerStatus } = this.props.SocketModel
      let formArr = this.state[key]
      formArr.map(item => {
        if (item.host && item.name && item._pwd && item.username) {
          item.isCheck = status
        }
        return item
      })
      this.setState({
        [this.state.key]: formArr,
      })
      // 通过socket更新节点检测状态
      if (checkPeerStatus) {
        let checkStatus = 'true'
        formArr.map(item => {
          let name = item.name || ''
          const arr = checkPeerStatus.filter(_k => _k.node_id === name)
          if (name && item.host && item._pwd && item.username && arr.length > 0) {
            const result = arr[0].success || false
            item.isCheck = result ? 'true' : 'fail'
            if (!result) {
              checkStatus = 'fail'
            }
          }
          return item
        })
        this.props.chengeCheck(checkStatus)
        this.setState({
          [this.state.key]: formArr,
        }, () => {
          this.props.SocketModel.setIsCheckPeer(null)
        })
      }
    }

    // 节点信息为输入信息
    changeValueCheck = (e, i, id, key) => {
      let formArr = this.state[key]
      formArr[i].isCheck = 'false'
      formArr[i][id] = e.target && e.target.value
      this.props.onChange && this.props.onChange([this.state.key], formArr)
      this.setState({
        [this.state.key]: formArr,
      })
    }
    
    deletePeer = (index, key) => {
      const formArr = this.state[key]
      formArr.splice(index, 1)
      this.setState({
        [key]: formArr,
      })
    }
    // 添加节点
    addPeer = () => {
      const formArr = this.state[this.state.key]
      const newData = {
        id1: `name`,
        id2: `host`,
        id3: `username`,
        id4: `_pwd`,
        isCheck: 'false',
      }
      formArr.push(newData)
      this.setState({
        [this.state.key]: formArr,
      })
    }
    render() {
      const { key } = this.state
      const { flag } = this.props
      const { checkPeerStatus } = this.props.SocketModel
      return (
        <div className="ca-wrapper common">
          <div className="ca-title">
            {
              flag === 'network'
                ? <div>服务名称</div>
                : <div>节点名</div>
            }
            <div>节点IP</div>
            <div>SSH用户名</div>
            <div>SSH密码</div>
            <div>检测结果</div>
          </div>
          <div className="ca-form-wrapper">
            <span style={{ display: 'none' }}>{JSON.stringify(checkPeerStatus)}</span>
            {
              this.state[key].map((item, index) => {
                let result = {
                  'false': {
                    color: 'rgba(23,30,45,0.25)',
                    text: '待检测',
                  },
                  'fail': {
                    color: '#E53232',
                    text: '检测失败，请检查节点配置',
                  },
                  'true': {
                    color: '#13C111',
                    text: '节点检测通过',
                  },
                  'checking': {
                    color: 'rgba(23,30,45,0.25)',
                    text: '检测中',
                  },
                }
                return (
                  <div key={index} className="ca-form" style={{ display: 'flex' }}>
                    {
                      flag === 'network'
                        ? <div style={{ width: '149px' }}>{item.id1}</div>
                        : <Form.Item name={`${key}${item.id1}${index}`} rules={[{ required: true, pattern: /^[^\u4e00-\u9fa5]+$/, message: '请输入节点名！' }]}>
                          <Input
                            autoComplete="off"
                            placeholder="请输入字符"
                            // maxLength={10}
                            onChange={(e) => { this.changeValueCheck(e, index, item.id1, key) }}
                            // onBlur={(e) => this.peerCheckStart(item, index, e.target.value, key)}
                            className="input"

                            style={{ width: 137, marginRight: 12 }}
                          />
                        </Form.Item>
                    }

                    <Form.Item name={`${key}${item.id2}${index}`} rules={[{ required: true, pattern: /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/, message: '格式错误！' }]}>
                      <Input
                        autoComplete="off"
                        placeholder="最多输入15个数字"
                        maxLength={15}
                        onChange={(e) => { this.changeValueCheck(e, index, item.id2, key) }}
                        className="input"
                        // onBlur={(e) => this.peerCheckStart(item, index, e.target.value, key)}
                        style={{ width: 137, marginRight: 12 }}
                      />
                    </Form.Item>
                    <Form.Item name={`${key}${item.id3}${index}`} rules={[{ required: true, message: '请输入用户名！' }]}>
                      <Input
                        autoComplete="off"
                        placeholder="请输入"
                        className="input"
                        onChange={(e) => { this.changeValueCheck(e, index, item.id3, key) }}
                        // onBlur={(e) => this.peerCheckStart(item, index, e.target.value, key)}
                        style={{ width: 121, marginRight: 12 }}
                        // autoComplete='off'
                      />
                    </Form.Item>
                    <Form.Item name={`${key}${item.id4}${index}`} rules={[{ required: true, message: '请输入密码！' }]}>
                      <Input
                        autoComplete="new-_pwd"
                        placeholder="请输入"
                        type="_pwd"
                        className="input"
                        onChange={(e) => { this.changeValueCheck(e, index, item.id4, key) }}
                        // onBlur={(e) => this.peerCheckStart(item, index, e.target.value, key)}
                        style={{ width: 121, marginRight: 12 }}
                      />
                    </Form.Item>
                    <Form.Item
                      name={`${key}result${index}`}
                      className="result"
                      style={{ flex: 1 }}
                      rules={[
                        // () => ({
                        //     validator() {
                        //         if (item.isCheck !== 'true') {

                        //             return Promise.reject(result[item.isCheck].text);

                        //         } else {
                        //             return Promise.resolve();
                        //         }
                        //     },
                        // })
                      ]}
                    >
                      {/* <Input
                                            autoComplete='off'
                                            readOnly={true}
                                        // value={result[item.isCheck].text}

                                        /> */}

                      <Form.Item noStyle>
                        <span className={'test-peer'} style={{ color: result[item.isCheck].color }}>{result[item.isCheck].text}</span>
                        {
                          this.props.isShowDelete
                            ? <img src={require('../../../../../images/org/delete.svg')} className="delete" onClick={() => this.deletePeer(index, key)} />
                            : null
                        }
                      </Form.Item>

                    </Form.Item>

                  </div>
                )
              })
            }

          </div>
          {
            this.props.isShowDelete
              ? <div className="create-peer" onClick={this.addPeer}>
                <img src={require('../../../../../images/org/add.svg')} />添加节点
              </div>
              : null
          }
        </div>
      )
    }
}
